/**
 * @module: 登录
 * @author: xiongsha
 * @date: 2020-05-26 18:42:08
 */
import React, { useState } from 'react';
import { Button, Toast } from 'antd-mobile';
import { RouteComponentProps } from 'react-router';
import request from '@src/utils/request.tsx';
import './style.less';

const Login = (props: RouteComponentProps) => {
  const [phone, setPhone] = useState<string>('');

  const getYzm = () => {
    // 获取验证码
    if (!/^1[3456789]\d{9}$/.test(phone)) {
      Toast.fail('手机号有误，请重新填写');
    } else {
      request('post', '/api/v1/verificationCodes', {
        phone,
      }).then((res) => {
        if (res && res.code === 200) {
          const { data } = res;
          props.history.push(`/yzm/${phone}/${data.key}`);
          Toast.info('发送成功');
        } else {
          Toast.fail(res.message);
        }
      });
    }
  };

  return (
    <div className="login">
      <p className="title">手机动态码登录</p>
      <p className="tips">未注册的手机验证后将自动创建新账号</p>
      <div className="phone">
        <span className="phoneTips">手机号</span>
        <span className="phoneCode">+86 </span>
        <input
          placeholder="请输入你的手机号"
          value={phone}
          onChange={(e) => {
            setPhone(e.target.value);
          }}
          className="phoneInput"
          type="phone"
        />
      </div>
      {/* <div className="phone name">
        <span className="phoneTips">用户名</span>
        <span className="phoneCode">： </span>
        <input
          placeholder="请输入你的手机号"
          value={phone}
          onChange={(e) => {
            setPhone(e.target.value);
          }}
          className="phoneInput"
          type="phone"
        />
      </div> */}
      <Button type="primary" onClick={getYzm}>
        获取验证码
      </Button>
      <Button
        type="ghost"
        className="cancelBtn"
        onClick={() => {
          setPhone('');
        }}
      >
        取消
      </Button>
      <div className="loginTips">
        登录即代表您同意
        <span>用户协议</span>
      </div>
    </div>
  );
};

export default Login;
